<!DOCTYPE html>
<!--
  - This file is part of Avenge <https://adblockplus.org/>,
  - Copyright (C) 2006-present eyeo GmbH
  -
  - Avenge is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - Avenge is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
  -->
<html>
<head>
  <meta charset="utf-8">
  <title>Test io-popout.js</title>
  <link rel="stylesheet" href="../skin/common.css">
  <link rel="stylesheet" href="../skin/fonts.css">
  <link rel="stylesheet" href="../skin/desktop-options.css">
  <link rel="stylesheet" href="./css/io-popout.css">
  <script src="../polyfill.js"></script>
  <script src="../ext/common.js"></script>
  <script src="../ext/content.js"></script>
  <script src="../common.js"></script>
  <script src="../i18n.js"></script>
  <script src="./io-popout.js"></script>
  <style>
    body
    {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 50px;
    }

    body > div
    {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .top
    {
      align-items: flex-start;
    }

    .bottom
    {
      align-items: flex-end;
    }
  </style>
</head>
<body>

<div class="top">
  <io-popout type="tooltip" i18n-body="body"></io-popout>
</div>

<div class="bottom">
  <io-popout type="tooltip" i18n-body="body-long"></io-popout>
</div>

<div>
  <io-popout type="menubar" i18n-body="body">
    <ul>
      <li class="i18n_option-a"></li>
      <li class="i18n_option-b"></li>
      <li class="i18n_option-c"></li>
    </ul>
  </io-popout>
</div>

</body>
</html>
